<template>
  <view class="performance-show">
    <CommonHeader>绩效</CommonHeader>
    <view class="multiple-date-selector">
      <view class="calendar-logo">
        <img src="@/static/performance-calendar.svg" alt="" />
      </view>
      <view class="date-begin" @click="selectBegin">
        {{ dateBegin }}
      </view>
      <view class="split">
        至
      </view>
      <view class="date-end" @click="selectEnd">
        {{ dateEnd }}
      </view>
    </view>
    <!-- 月份选择器 -->
    <van-popup
      :show="ifDateShow"
      position="bottom"
      custom-style="height: 40%;"
      @close="closeDate"
    >
      <van-datetime-picker
        type="year-month"
        :value="currentDate"
        :formatter="formatter"
        :max-date="maxDate"
        :min-date="minDate"
        @confirm="DateConfirm"
        @cancel="DateCancel"
      />
    </van-popup>
    <view class="performance-content">
      <view class="performance-pad">
        <view
          class="performance-item"
          v-for="item in performanceList"
          :key="item.id"
        >
          <view class="performance-item-sign sign-good">
            <img src="@/static/performance-good.svg" alt="" />
          </view>
          <view class="performance-item-desc">
            <view class="desc-title">
              {{ item.meritFrom }}
            </view>
            <view class="desc-time">
              {{ item.date }}
            </view>
          </view>
          <view class="mark"> ￥{{ item.meritMoney }} </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script src="./script.js"></script>
<style src="./style.less" lang="less"></style>
